<template>
  <div id="eight-nape-data"></div>
</template>

<script>
import echarts from '../../lib/echarts'

export default {
  name: "DataAnalyzeEight",
  components: {},
  data() {
    return {
      category: ["2020-5-30", "2020-5-31", "2020-6-1", "2020-6-2", "2020-6-3", "2020-6-4", "2020-6-5", "2020-6-6", "2020-6-7", "2020-6-8"],
      lineData: [251, 191, 178, 220, 293, 372, 228, 167, 197, 185],
      barData: [196, 110, 104, 171, 175, 230, 185, 118, 103, 139],
      title: ['line', 'bar']
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.initial();
  },
  methods: {
    initial() {
      var myChart = echarts.init(document.getElementById('eight-nape-data'));
      myChart.setOption({
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: "dotted",
              opacity: 0
            }
          }
        },
        grid: {
          left: "2%",
          right: "2%",
          top: "16%",
          bottom: "2%",
          containLabel: true
        },
        legend: {
          data: this.title,
          textStyle: {
            color: '#ccc'
          }
        },
        xAxis: {
          type: "category",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#2479ff",
              lineHeight: 26
            }
          },
          axisLine: {
            lineStyle: {
              color: '#2479ff',
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            show: true,
            length: 3,
            lineStyle: {
              width: 1,
              type: "solid"
            }
          },
          data: this.category
        },
        yAxis: {
          splitLine: {show: false},
          axisLine: {
            lineStyle: {
              color: '#2479ff',
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#2479ff"
            }
          },
        },
        series: [
          {
            name: 'line',
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 15,
            itemStyle: {
              color: "#F6416C"
            },
            data: this.lineData
          },
          {
            name: 'bar',
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              barBorderRadius: 10,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#14c8d4'},
                  {offset: 1, color: '#43eec6'}
                ]
              )
            },
            data: this.barData
          },
          {
            name: 'line',
            type: 'bar',
            barGap: '-100%',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: 'rgba(20, 200, 212, 0.5)'},
                  {offset: 0.2, color: 'rgba(20, 200, 212, 0.3)'},
                  {offset: 1, color: 'rgba(20, 200, 212, 0)'}
                ]
              )
            },
            z: -12,
            data: this.lineData
          },
          {
            name: 'dotted',
            type: 'pictorialBar',
            symbol: 'rect',
            itemStyle: {
              color: '#fff'
            },
            symbolRepeat: true,
            symbolSize: [12, 4],
            symbolMargin: 1,
            z: -10,
            data: this.lineData
          }
        ]
      });
    }
  }
}
</script>

<style scoped>
#eight-nape-data {
  width: 100%;
  height: 100%;
}
</style>
